<template>
  <div class="content-container" :style="'height: ' + clientHeight + 'px'">
    <el-row class="row">
      <el-col :span="4">
        <member-menu active="comment"/>
      </el-col>
      <el-col :span="20">
        <div class="personal-container">
          <div class="status-menu">
            <el-menu :default-active="defaultMenuActive" class="el-menu-demo" mode="horizontal" @select="handleSelectMenu">
              <el-menu-item index="">全部</el-menu-item>
              <el-menu-item index="lesson">课程</el-menu-item>
            </el-menu>
          </div>
          <div class="byte-empty" v-if="!commentList || !commentList.length" style="margin: 7% 0;">
            <div class="byte-empty-wrapper">
              <div class="byte-empty-image">
                <img alt="暂无评论" src="">
              </div>
              <div class="byte-empty-description">暂无评论</div>
            </div>
          </div>
          <el-row class="row" :style="'height: ' + (clientHeight - 90) + 'px'" v-else>
            <el-col :span="12">
              <div class="comment-list-wrapper" @scroll="commentListScrollEvent">
                <div class="comment-load-more-wrapper">
                  <template v-for="item in commentList" :key="item.id">
                    <div class="comment-item-wrapper" :class="{'select' : selectComment.id === item.id}">
                      <comment-item :item="item" :member="member" :comment-id="selectComment.id" :submit-callback="submitCallback" @click="selectCommentHandle(item)"/>
                    </div>
                  </template>
                  <div v-if="noMoreComment" class="load-more-no-more-tips">我是有底线的</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="comment-sub-list-wrapper" v-if="selectComment && selectComment.id">
                <div class="comment-item-wrapper-select">
                  <comment-item :member="member" :item="selectComment" :submit-callback="submitCallback" :delete-callback="deleteCallback" :comment-id="selectComment.id"/>
                </div>
                <div class="comment-count">全部&nbsp;{{selectComment && selectComment.replyList && selectComment.replyList.length || 0}}&nbsp;条回复</div>
                <div class="byte-empty" v-if="!selectComment.replyList || !selectComment.replyList.length">
                  <div class="byte-empty-wrapper">
                    <div class="byte-empty-image">
                      <img alt="暂无回复" src="">
                    </div>
                    <div class="byte-empty-description">暂无回复</div>
                  </div>
                </div>
                <div class="reply-list" v-else>
                  <template v-for="item in selectComment.replyList" :key="item.id">
                    <comment-item :member="member" :item="item" :submit-callback="submitCallback" :comment-id="selectComment.id"/>
                  </template>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {ref} from "vue"
  import router from "../../../router"
  import commentItem from "./commentItem"
  import memberMenu from "../menu/index"
  import {getMemberInfo} from "../../../api/member"
  import {error} from "../../../util/tipsUtils";
  import {getCurrentMemberCommentList} from "../../../api/comment";

  export default {
    name: "memberComment",
    components: {
      memberMenu,
      commentItem
    },
    setup() {
      const member = ref({})
      const param = ref({
        topicId: "",
        topicType: "",
        current: 1,
        size: 10
      })
      const commentList = ref([])
      const selectComment = ref({})
      const noMoreComment = ref(false)
      const loadCommentList = () => {
        getCurrentMemberCommentList(param.value, res => {
          console.log(res)
          if (!res || !res.list || !res.list.length) {
            if (res.total > param.value.size) {
              noMoreComment.value = true
            }
            param.value.current = param.value.current - 1
            return
          }
          if (res.list.length < param.value.size) {
            noMoreComment.value = true
          }
          for (const listElement of res.list) {
            commentList.value.push(listElement)
          }
          if (!selectComment.value || !selectComment.value.id) {
            if (res.list && res.list.length) {
              selectComment.value = res.list[0]
            }
          } else {
            for (const re of res.list) {
              if (selectComment.value.id === re.id) {
                selectComment.value = re;
                break
              }
            }
          }
        })
      }
      const load = function() {
        const obj = getMemberInfo(res => {
          member.value = res
          if (!res) {
            error("请先登录")
            router.push({path: "/index"})
          }
          loadCommentList()
        })
        if (!obj) {
          error("请先登录")
          router.push({path: "/index"})
        }
      }
      load()
      const selectCommentHandle = (item) => {
        selectComment.value = item
      }
      const defaultMenuActive = ""
      const handleSelectMenu = (val) => {
        console.log(val)
        param.value.topicType = val
        loadCommentList()
      }
      const submitCallback = () => {
        loadCommentList()
      }
      const deleteCallback = () => {
        loadCommentList()
      }
      const commentListScrollEvent = (e) => {
        let scrollTop = e.srcElement.scrollTop
        let clientHeight = e.srcElement.offsetHeight
        let scrollHeight = e.srcElement.scrollHeight
        // 滚动到底部，逻辑代码
        if (scrollTop + clientHeight >= scrollHeight) {
          if (!noMoreComment.value) {
            param.value.current = param.value.current + 1
            loadCommentList()
          }
        }
      }
      let clientHeight = document.documentElement.clientHeight - 120;
      if (clientHeight < 500) {
        clientHeight = 500;
      }
      return {
        clientHeight,
        member,
        commentList,
        selectComment,
        selectCommentHandle,
        defaultMenuActive,
        handleSelectMenu,
        submitCallback,
        deleteCallback,
        commentListScrollEvent,
        noMoreComment
      }
    }
  }
</script>

<style lang="scss" scoped>
  .personal-container {
    background-color: #FFFFFF;
    margin: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .row {
    .el-col {
      height: 100%;
    }
  }
  .el-menu-item {
    height: 80px;
    .el-icon-close {
      display: none;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
  }
  .el-menu-item:focus, .el-menu-item:hover {
    height: 80px;
    em {
      display: none;
    }
    .el-icon-close {
      display: block;
    }
  }
  .el-menu-item:focus{
    em {
      display: block;
    }
    .el-icon-close {
      display: none;
    }
  }
  .status-menu {
    .el-menu-demo {
      border: 0;
      margin-left: 30px;
      .el-menu-item {
        height: 50px;
        padding: 0;
        margin-left: 30px;
        font-size: 16px;
        color: #333333;
        &:first-child {
          margin-left: 0;
        }
        &:hover {
          color: $--color-primary;
        }
      }
      .el-menu-item.is-active {
        color: $--color-primary;
        font-weight: 500;
      }
    }
  }
  .byte-empty {
    margin-top: 7%;
    padding: 10px 0;
    .byte-empty-wrapper {
      width: 100%;
      box-sizing: border-box;
      font-size: 12px;
      color: #999;
      text-align: center;
      .byte-empty-image {
        color: #d8d8d8;
        font-size: 48px;
        line-height: 1;
        margin-bottom: 24px;
      }
      img {
        width: 140px;
        height: 140px;
      }
      .byte-empty-description {
        font-size: 14px;
        color: #999999;
        line-height: 20px;
      }
    }
  }
  .comment-list-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    &::-webkit-scrollbar { width: 0 !important }
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    .comment-load-more-wrapper {
      margin-top: 20px;
      border-right: 1px solid #e8e8e8;
      .load-more-no-more-tips {
        color: #cccccc;
        text-align: center;
        font-size: 14px;
        padding: 20px 0;
      }
      .comment-item-wrapper {
        cursor: pointer;
        position: relative;
        border-left: 2px solid #ffffff;
        &:after {
          content: " ";
          height: 1px;
          background-color: #e8e8e8;
          position: absolute;
          bottom: 0;
          right: 30px;
          left: 30px;
        }
        &:last-child:after {
          height: 0;
        }
        &:hover {
          border-left: 2px solid transparent;
          background-color: #e8e8e8;
          border-left-color: $--color-primary;
        }
      }
      .select {
        border-left: 2px solid transparent;
        background-color: #e8e8e8;
        border-left-color: $--color-primary;
      }
    }
  }
  .comment-sub-list-wrapper {
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    &::-webkit-scrollbar { width: 0 !important }
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    .comment-item-wrapper-select {
      position: relative;
      margin-top: 20px;
    }
    .comment-count {
      padding-left: 30px;
      padding-right: 48px;
      margin: 8px 0;
    }
    .reply-list {
      position: relative;
      padding-left: 30px;
      .comment-item {
        padding: 12px 30px 12px 0;
      }
    }
  }
</style>
<style>
  body {
    background-color: #f5f5f5!important;
    height: 100%;
  }
</style>
